<template>
	<scroll-view class="rui-tabs" :class="sticky ? 'sticky':''" scroll-x="true" @scroll="scroll" scroll-with-animation
		:scroll-left="scrollLeft">
		<view class="rui-tabs_item" :class="index == current ?'rui-tabs_action ':''+'TAB_'+index"
			v-for="(item, index) in list" :key="index" @click="change(index, item)">{{item.name}}</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue"
	let current = ref(0)
	let scrollLeft = ref(0)

	const instace = getCurrentInstance();

	defineProps({
		sticky: {
			type: Boolean,
			default: false
		}
	})

	let list = ref([{
			id: 1,
			name: "跟团游"
		},
		{
			id: 2,
			name: "私家团"
		},
		{
			id: 3,
			name: "自由行"
		},
		{
			id: 4,
			name: "包车游"
		}
	])

	const change = function(index, data) {
		current.value = index;
		const query = uni.createSelectorQuery().in(instace.proxy)
		query.select(".TAB_" + index).boundingClientRect(function(data) {
			scrollLeft.value = data.width * index - data.width
		}).exec();
	}

	const scroll = e => {
		// console.log(e.detail.scrollLeft)

	}
</script>

<style lang="scss" scoped>
	.sticky {
		position: sticky !important;
		top: 0;
	}

	.rui-tabs {
		white-space: nowrap;
		width: 100%;
		z-index: 2;
		position: relative;
		// background: #f5f5f5;
		font-weight: bold;
		color: #666;

		// ::-webkit-scrollbar {
		// 	display: none;
		// }

		&_action {
			font-size: 36rpx;
			position: relative;
			color: #222;

			&::before {
				content: "";
				display: block;
				height: 15rpx;
				width: 70rpx;
				border-radius: 30rpx;
				position: absolute;
				bottom: 5rpx;
				left: 50%;
				z-index: -1;
				border-radius: 30rpx;
				background: var(--color);
				transform: translate(-50%, -25rpx);
			}
		}

		&_item {
			display: inline-block;
			text-align: center;
			padding: 15px;
			// transition: all .7s;
		}
	}
</style>